<template>
  <div id="app">
    <el-button>once</el-button>
    <el-button>two</el-button>
     <hr>
    <p>布局</p>
    <div class="box">
      <div class="left flex"></div>
      <div class="mid flex"></div>
      <div class="right flex"></div>
    </div>
     
    <hr>
    <p></p>
    <el-row class="form" :gutter='10'>
      <el-col :span='5'><div class="grid1">1</div></el-col>
      <el-col :span='5'><div class="grid2">2</div></el-col>
      <el-col :span='5'><div class="grid3">3</div></el-col>
    </el-row>
    <el-row class="form" :gutter='10'>
      <el-col :span='5'><div class="grid1">4</div></el-col>
      <el-col :span='5'><div class="grid2">5</div></el-col>
      <el-col :span='5'><div class="grid3">6</div></el-col>
    </el-row>
    <el-row class="form" :gutter='10'>
      <el-col :span='5'><div class="grid1">7</div></el-col>
      <el-col :span='5'><div class="grid2">8</div></el-col>
      <el-col :span='5'><div class="grid3">9</div></el-col>
    </el-row>
    <hr>
    <p>按钮</p>
    <div class="anniu">
      <el-button>默认</el-button>
      <el-button type='success'>成功</el-button>
      <el-button type='danger'>危险</el-button>
      <el-button type='warning'>警告</el-button>
      <el-button type="info" size="small">info</el-button>
      
    </div>
    <hr>
    <p>时间选择</p>
    <el-time-select v-model="times" size="normal" placeholder=""
      :picker-options="{
        start: '00:00',
        step: '00:30',
        end: '24:00',
      }"
      change="">
    </el-time-select>
    <hr>
    <p>日期选择</p>
    <el-date-picker v-model='value2' type="date" size="normal" placeholder="选择日期时间">
     
   
    </el-date-picker>
    
    
    <hr>
    <p>单选栏</p>
    <el-radio-group v-model="radio1" >
        <el-radio-button size='mini' label="象山"></el-radio-button>
        <el-radio-button size='mini' label="南昌"></el-radio-button>
        <el-radio-button size='mini' label="鄱阳"></el-radio-button>
        <el-radio-button size='mini' label="宁波"></el-radio-button>
    </el-radio-group>
    <hr>
  
    <hr>
    <p>级联组件</p>
    <el-cascader :options="options" v-model="values" clearable filterable :show-all-levels="false"
      :props="{ expandTrigger: 'hover', multiple: true, checkStrictly: true }" @change="handleChange(values)">
    </el-cascader>
    <hr>
    <p>switch开关</p>
    <el-switch v-model="value1" :active-value="true" :inactive-value="false" @change="changeState(value1)">
    </el-switch>
 
    
    <hr>
    <p>ECharts 图表</p>
    <chart></chart>
    
    <login></login>
  </div>
</template>

<script>
import chart from './components/chart';
import login from './components/login'
export default {
  name: 'App',
  data(){
    return{
      state:'哈哈',
      radio1:'象山',
      values:[],  
      //级联组件
      options:[
        {
          value:'1',
          label: '疾风剑豪',
          children:[
            {
              value:'1-1',
              label:'亚索',
              children:[
                {
                  value:'1-1-1',
                  label:'托儿索',
                }
              ]
            }
          ]
        },
        {
          value:2,
          label: '寒冰射手',
          children:[
            {
              value:2-2,
              label:'艾希'
            }
          ]
        }

      ],
      //switch组件
      value1: true,
      times:'',
      value2:'',
    }
  },
  components: {
      chart,
      login
     
  },
  methods:{
    handleSelect:function(){

    },
    //级联组件
    handleChange:function(values){
      console.log(values);
    },
    changeState:function(value1){
      console.log('切换了');
    }
  }
}
</script>

<style lang="less" scoped>
hr{
  display: block;
  margin: 20px 0;
}
body,*{margin: 0;padding: 0;}
.box{
  width: 100%;
  height: 50px;
  display: flex;
  .flex{
    flex: 1;
  }
  .left{
    background-color: skyblue;
  }
  .mid{
    background-color: rgb(16, 47, 59);
  }
  .right{
    background-color: rgb(68, 102, 116);
  }
}
.form{
  width: 500px;
  height: 30px;
  text-align: center;
  .grid1{
    background-color: rgb(221, 59, 59);
  }
  .grid2{
    background-color: rgb(177, 212, 96);
  }
  .grid3{
    background-color: rgb(59, 129, 221);
  }
}

// 常见按钮

</style>
